<!-- 这是公益作用 -->
<template>
  <div id="publicwelfare">
    <div class="center">
      <NavTitle>
        <template #left>
          <div class="title">公益作用</div>
          <div class="info">EVENT REVIEW</div>
        </template>
      </NavTitle>
      <!-- 公益作用 -->
      <div class="content">
        <template v-for="item in state.articleList" :key="item._id">
          <div class="list">
            <img :src="item.cover" alt="" />
            <div class="show">
              <div class="tit">
                <a :href="'/article/' + item._id" target="_blank">{{
                  item.title
                }}</a>
              </div>
              <div class="des">
                {{ item.des }}
              </div>
              <div class="time" v-format-time="'MM-DD'">
                {{ item.time }}
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { NavTitle } from '@/components/client/public'
import {
  getEffectData,
  ArticleListDataTypes
} from '@/server/client/api_article'

const state = reactive({
  articleList: [] as Array<ArticleListDataTypes>
})

const { data: articleList } = await getEffectData(1, 2)
state.articleList = articleList.data.articleList!
</script>

<style scoped lang="less">
#publicwelfare {
  background-color: #fff;
  margin: 100px auto;
  .center {
    width: 1200px;
    margin: 0 auto;
    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
      .list {
        width: 600px;
        height: 518px;
        display: flex;
        flex-direction: column;
        align-items: center;
        &:hover {
          .show {
            margin-top: -130px;
            // box-shadow: 0 3px 8px rgb(235, 231, 231);
            .time {
              display: block;
            }
          }
        }
        img {
          width: 585px;
          height: 330px;
        }
        .show {
          width: 515px;
          height: 228px;
          background-color: #fff;
          margin-top: -80px;
          box-sizing: border-box;
          padding: 30px;
          transition: all 0.3s;

          .tit {
            color: #444;
            font-size: 16px;
            a {
              color: #444;
              &:hover {
                color: #f13a3a;
              }
            }
          }
          .des {
            margin-top: 16px;
            font-size: 14px;
            color: #777;
            line-height: 2;
            white-space: normal; //使文本可以多行显示
            text-overflow: ellipsis; //使多余的部分用省略号来代替
            overflow: hidden; //隐藏多余的部分
            display: -webkit-box; //浮动布局
            -webkit-line-clamp: 2; //显示的行数
            -webkit-box-orient: vertical; //垂直排列
          }
          .time {
            margin-top: 26px;
            color: #777;
            font-size: 24px;
            font-weight: 800;
            height: 50px;
            line-height: 50px;
            border-top: 1px solid rgb(239, 236, 236);
            display: none;
            transition: all 1s;
            padding-top: 10px;
          }
        }
      }
    }
  }
}
</style>
